<template>
    <el-card class="box-card">
        <div slot="header">
            <Breadcrumb>评论管理</Breadcrumb>
        </div>
        <el-table
            :data="comment"
            style="width: 100%">
            <el-table-column
                prop="title"
                label="文章标题">
            </el-table-column>
            <el-table-column
                prop="total_comment_count"
                label="总评论数">
            </el-table-column>
            <el-table-column
                prop="fans_comment_count"
                label="粉丝评论数">
            </el-table-column>
            <el-table-column label="评论状态">
               <template slot-scope="scope">
                <!-- {{scope.row.status}} -->
                <el-tag v-if="scope.row.comment_status" >正常</el-tag>
                <el-tag v-else type="danger">关闭</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button :type="scope.row.comment_status ? 'primary' : 'danger'"
                    :loading="scope.row.sendMsgLoading"
                    @click="hSwitch(scope.$index, scope.row)" size="small">
                      {{scope.row.comment_status ? '关闭' : '打开'}}评论</el-button>
                </template>
            </el-table-column>

        </el-table>
         <el-pagination
            style="margin-top:10px"
            background
            layout="prev, pager, next"
            @current-change="hCurrentchange"
            :total="total_count">
        </el-pagination>
    </el-card>
</template>
<script>
export default {
  name: 'Comment',
  data () {
    return {
      comment: [],
      page: 1,
      total_count: 0,
      isLoading: false
    }
  },
  created () {
    this.loadComment()
  },
  methods: {
    // 打开评论关闭评论
    async hSwitch (index, row) {
      row.sendMsgLoading = true
      try {
        const result = await this.$http({
          method: 'PUT',
          url: '/mp/v1_0/comments/status?article_id=' + row.id.toString(),
          data: {
            allow_comment: !row.comment_status
          }
        })
        console.log('这是：', result)
        // 重新加载数据
        // this.loadComment()
        // 在本地修改数据
        row.comment_status = !row.comment_status
        this.$message.success('操作成功')
        row.sendMsgLoading = false
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败')
        row.sendMsgLoading = false
      }
    },
    async loadComment () {
      const result = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/articles',
        params: {
          page: this.page,
          response_type: 'comment'
        }
      })
      console.log(result)
      this.comment = result.data.data.results
      this.total_count = result.data.data.total_count
    },
    hCurrentchange (curPage) {
      // alert(curPage)
      // 更新页码
      this.page = curPage
      // 重新请求数据
      this.loadComment()
    }
  }
}
</script>
<style lang="less">

</style>
